<template>
  <div class="edit-profile-container container dialog"
    :class="[isH5 ? 'edit-profile-container-h5' : 'edit-profile-container-pc']" @click="closeEditProfileBox"
    @mousedown.stop>
    <div :class="['edit-profile-box']" @click.stop>
      <div style="font-size: 16px; margin-bottom: 20px;">修改密码</div>
      <el-form ref="ruleFormRef" :model="info" :rules="rules" label-width="110px">
        <el-form-item label="原密码：" prop="old_password">
          <el-input type="password" v-model="info.old_password" placeholder="填写原密码" />
        </el-form-item>
        <el-form-item label="新密码：" prop="password" style="margin-top: 20px;">
          <el-input type="password" v-model="info.password" placeholder="填写新密码" />
        </el-form-item>
        <el-form-item label="确认新密码：" prop="confirm_password" style="margin-top: 20px;">
          <el-input type="password" v-model="info.confirm_password" placeholder="再次填写新密码" />
        </el-form-item>
      </el-form>
      <footer v-if="!isH5" class="edit-footer">
        <button class="btn-close" @click="closeEditProfileBox">
          {{ TUITranslateService.t("Profile.取消") }}
        </button>
        <button class="btn-save" @click="submitEditProfileBox(ruleFormRef)">
          {{ TUITranslateService.t("Profile.保存") }}
        </button>
      </footer>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, defineEmits } from "../TUIKit/adapter-vue";
import TUIChatEngine, {
  TUITranslateService,
  TUIUserService,
  TUIStore,
  StoreName,
} from "@tencentcloud/chat-uikit-engine";
import { TUILogin } from '@tencentcloud/tui-core';
import { Toast, TOAST_TYPE } from "../TUIKit/components/common/Toast/index";
import { IUserProfile } from "../TUIKit/interface";
import { isH5, isPC } from "../TUIKit/utils/env";
import { ChangePwd } from '@/api';
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()

const emits = defineEmits(["closeEditProfileBox"]);
const ruleFormRef = ref<FormInstance>()
const info = ref({
  old_password: '',
  password: '',
  confirm_password: '',
})
const rules = ref({
  old_password: [{ required: true, message: '请填写原密码', trigger: 'blur' }],
  password: [
    { required: true, message: '请填写新密码', trigger: 'blur' }, 
    { pattern: /^(?!.*\s)(?=.*[a-z])(?=.*[0-9])(?=.*[\W_]).{8,16}$/, message: '密码必须为8-16位非空字符，并包含数字、字母和特殊符号', trigger: 'blur' }
  ],
  confirm_password: [{ required: true, message: '请再次填写新密码', trigger: 'blur' }],
})

function closeEditProfileBox() {
  emits("closeEditProfileBox");
}

const submitEditProfileBox = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (info.value.password !== info.value.confirm_password) {
        Toast({
          type: TOAST_TYPE.ERROR,
          message: '两次密码输入不一致',
        })
        return
      }
      ChangePwd({
        old_password: info.value.old_password,
        password: info.value.password,
      }).then(res => {
        ElMessage({
          message: '修改成功',
          type: 'success',
        })
        isPC && closeEditProfileBox();
        router.push({ path: '/' });
      }).catch(() => {
      })
    } else {
      // console.log('error submit!', fields)
    }
  })
}
</script>
<style lang="scss" scoped>
@import "../styles/common.scss";

.edit-profile-container {
  @extend .container;
  font-size: 14px;

  .edit-profile-box {
    @extend .box;
    align-items: stretch;

    .edit-form {
      flex: 1;
      @include flex(column, flex-start, stretch);

      .edit-form-item {
        @include flex(row, flex-start, center);
        min-height: 54px;
        padding: 10px;

        .form-label {
          box-sizing: border-box;
          width: 70px;
          margin-right: 20px;
          color: #333;
        }

        .form-item {
          @include flex(row, flex-start, stretch);

          .avatar-list {
            @include flex(row, space-between, stretch);

            .avatar-list-item {
              margin: 10px;
              border: 1px solid transparent;
            }

            .avatar-list-item:first-child {
              margin-left: 0px;
            }

            .avatar-list-item-selected {
              border: 1px solid #006eff;
              color: #006eff;
              border-radius: 5px;
            }
          }

          .form-item-input {
            flex: 1;
            padding: 6px 10px;
            border: 1px solid rgba(131, 137, 153, 0.4);
            border-radius: 2px;
            line-height: 20px;
            color: #596174;
          }

          .gender-list {
            @include flex(row, space-between, center);

            .gender-list-li {
              @include flex(row);
              margin-right: 20px;

              .gender-list-item {
                @include flex(row);
                flex: 1;
                font-size: 14px;

                .gender-list-item-radio {
                  margin: 0px 2px;
                }
              }
            }
          }

          .birthday-container {
            @include flex(row, space-between, stretch);
            flex: 1;
            padding: 6px 10px;
            border: 1px solid rgba(131, 137, 153, 0.4);

            .birthday-date-picker {
              @include flex(row);
              flex: 1;
              height: 20px;

              :deep(.tui-date-picker-input) {
                @include flex(row, flex-start);
                flex: 1;
              }

              :deep(.tui-date-picker-input-start) {
                padding: 2px 0px;
                text-align: start;
                font-size: 14px;

                &::placeholder {
                  text-align: start;
                }
              }

              :deep(.tui-date-picker-dialog-container-one) {
                left: -220px;
              }
            }
          }
        }
      }
    }

    .edit-footer {
      @include flex(row, flex-end);
      margin-top: 30px;

      .btn-close {
        @include btn-normal;
        margin-right: 10px;
      }

      .btn-save {
        @include btn-default;
      }

      .btn-close,
      .btn-save {
        width: 90px;
        height: 30px;
        padding: 2px;
      }
    }
  }
}

.edit-profile-container-pc {
  .edit-profile-box {
    width: 460px;
    height: 300px;
    border-radius: 10px;
    padding: 20px;

    .edit-form {
      .edit-form-item {
        .form-item {
          flex: 1;
        }
      }
    }
  }

  .title {
    justify-content: flex-start;
    padding: 0px;
  }
}

.edit-profile-container-h5 {
  @extend .edit-profile-container;

  .edit-profile-box {
    @extend .box-h5;
    width: 100%;
    height: 100%;
    background-color: #efefef;

    .title {
      background-color: #ffffff;
    }

    .edit-form {
      .edit-form-item {
        background-color: #ffffff;

        .form-label {
          font-size: 16px;
          color: #000000;
          width: 80px;
        }

        .form-info {
          @include flex(row, flex-end, stretch);

          .form-info-content {
            @include single-line-ellipsis(auto);
          }

          flex: 1;
          overflow: hidden;
          font-size: 16px;
          color: rgba(151, 151, 151, 1);

          .form-info-arrow {
            margin-left: 2px;
          }
        }

        .form-item {
          flex: none;

          .avatar-list,
          .form-item-input,
          .gender-list,
          .birthday-container {
            margin: 0 20px;
          }

          .avatar-list {
            .avatar-list-item {
              margin: 10px 0px;
            }
          }

          .gender-list {
            .gender-list-li {
              margin: 0px;

              .gender-list-item {
                border: 1px solid rgba(221, 221, 221, 1);
                font-size: 16px;
                border-radius: 5px;
                width: 120px;
                height: 40px;

                &-selected {
                  border: 1px solid #006eff;
                  color: #006eff;
                  border-radius: 5px;
                }
              }
            }
          }

          .form-item-input {
            padding: 14px 10px;
            font-size: 16px;
            border: 0px;
            background-color: rgba(248, 248, 248, 1);
          }
        }
      }

      .edit-form-space {
        box-sizing: border-box;
        height: 10px;
        padding: 0px;
        background-color: transparent;
      }
    }
  }
}
</style>
